<template>
    <div class="components-foot">
        <div class="foot-content">
            <div class="foot-left">
                <div class="tab-list">
                    <div class="tab-item" 
                    :class="item.id==current? 'on':'' " 
                    v-for="(item,index) in tabList" 
                    :key="item.id"
                    @click="changeItem(item.id)">
                        {{item.name}}
                    </div>
                </div>
                <!-- 热门项目 -->
                <div class="project-list" v-if="current===0">
                    <div class="project-item" @click="toprojectDetail(item.id,item)" v-for="item in projectList" :key="item.id">
                        {{item.realEstateName}}
                    </div>
                </div>
                <!-- 人气店铺 -->
                <div class="project-list" v-if="current===1">
                    <div class="project-item" @click="toroomDetail(item.id)" v-for="item in roomList" :key="item.id">
                        {{item.roomName}}
                    </div>
                </div>
            </div>
            <div class="foot-right">
                <div class="pic">
                    <img src="../../assets/code.jpg" alt="">
                </div>
                <div class="telephone">官方客服0731-89671685</div>
            </div>
        </div>
        <div class="foot-message">
            <span class="records-item">长沙二咸数字科技有限公司</span>
            <span class="records-item"><a href="https://beian.miit.gov.cn/" target="_blank"  >湘ICP备2021001439号-1</a></span>
            <span class="records-item">Copyright 2021 tangzhezu.com 版权</span>
        </div>
    </div>
</template>
<script>
import{homeprojectList,homeroomList} from "@/api/home"
export default {
    data(){
        return{
            tabList:[
                {name:"热门项目",id:0},
                {name:"人气商铺",id:1}
            ],
            current:0,
            projectList:[],
            roomList:[]
        }
    },
    mounted(){
        this.loadData()
    },
    methods:{
        // 初始数据
        loadData(){
            // 精选项目
            homeprojectList().then(res=>{
                console.log("项目组件",res)
                this.projectList=res
            })
            // 优质好铺
            homeroomList().then(res=>{
                console.log('店铺组件',res)
                this.roomList=res
            })
        },
        changeItem(id){
            this.current=id
        },
        // 去店铺详情
        toroomDetail(id){
        // console.log(id)
        this.$router.push({path:"/roomDetail",query:{roomId:id}})
        },
        // 去项目详情
        toprojectDetail(id,item){
        if(item.realEstateTitle=="敬请期待"){
            this.$toast("敬请期待");
        }else{
            this.$router.push({path:"/projectDetail",query:{EngineerId:id}})
        }
        },

    }
}
</script>
<style lang="less" scoped>
.components-foot{
    background-color: #252220;
    padding: 0 0.34rem;
    padding-bottom: 0.15rem;
}
.foot-content{
    display: flex;
    padding-bottom: 0.33rem;
    border-bottom: 1px solid #3D3B39;
}
.tab-list{
    display: flex;
    padding-top: 0.2rem;
}
.tab-item{
    font-size: 0.26rem;
    color: #999999;
    margin-right: 0.3rem;
}
.tab-item.on{
    color: #fff;
}
.project-list{
    display: flex;
    flex-wrap: wrap;
}
.project-item{
    font-size: 0.24rem;
    color: #999999;
    margin-right: 0.25rem;
    display: flex;
    margin-top: 0.25rem;
}
.foot-left{
    flex: 1;
}
.foot-right{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 0.21rem;
    .pic{
        width: 1rem;
        height: 1rem;
        border-radius: 3px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        img{
            width: 0.8rem;
            height: 0.8rem;
        }
    }
    .telephone{
        font-size: 0.12rem;
        color: #F08200;
        margin-top: 0.1rem;
    }
}
.foot-message{
    display: flex;
    justify-content: space-between;
    margin-top: 0.15rem;
    .records-item{
        font-size: 0.14rem;
        color: #999999;
        display: flex;
        justify-content: center;
        position: relative;
    }
    .records-item::before{
        position: absolute;
        display: block;
        content: "";
        width: 1px;
        height: 8px;
        background-color: #999999;
        right: -0.2rem;
        top: 50%;
        transform: translate(0, -50%);
    }
    .records-item:last-child::before{
        display: none;
    }
    
}
.records-item{
  a{
    text-decoration: none;
    color: #999999;
  }
}
</style>